{% extends "_layout.html" %}
{% import "component/forms.njk" as forms %}

{# 样式代码 #}
{% block style %}
<link href="/css/plugins/iCheck/custom.css" rel="stylesheet">
<style>
.goods table {
    color:#333333;
    border-collapse: collapse;
    border: 1px solid #e7eaec;
    width: 100%;
}
.goods table td {
    padding: 8px;
    border: 1px solid #e7eaec;
}


</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>添加菜品</h5>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal m-t from" id="form" action="/goods/edit/en" method="post" data-href="/goods">
                    	{{ forms.hidden('goodsId', data.id) }}
						{{ forms.text('商品英文名称', 'name', data.name, '请输入商品英文名称', 'required') }}

						<div id="dishes_taste">
						<div class="form-group">
                            <label class="col-sm-2 control-label">菜品口味</label>
                            <div class="col-sm-4">
                                <input v-model="name" name="" class="form-control large" value="" type="text" placeholder="输入商品口味">
                            </div>
					        <button class="btn btn-primary" type="button" @click="add">添加</button>
                        </div>

                        <template  v-if="taste.length > 0">
                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <div class="col-sm-8" style="max-height: 500px; overflow: auto;">
                                <div class="row goods">
                                    <table class="select-goods">
                                    <template v-for="(item, index) in taste">
                                        <tr>
                                            <td width="50">${index + 1}</td>
                                            <td>${item}</td>
                                            <td width="50"> <a @click="remove(index)">删除</a></td>
                                            <input type="hidden" name="taste" v-model="item"/>
                                        </tr>
                                    </template>
                                    </table>
                                </div>
                            </div>
                        </div>
                        </template>
                        </div>
						{{ forms.textarea('菜品英文介绍', 'jingle', data.jingle, '请输入商品介绍', 'required') }}

                        {{ forms.text('推荐英文名', 'recommandName', data.recommandName, '请输入推荐英文名', 'required') }}

						{{ forms.images(
						    label = '介绍图片',
						    fileList = [{
						            name: 'notice',
						            value: data.notice,
						            url: ctx.helper.showImage(data.notice, 160, 160, 'fixed'),
                                    text: '注意事项'
						        },
						        {
						            name: 'imageShow',
						            value: data.imageShow,
						            url: ctx.helper.showImage(data.imageShow, 160, 160, 'fixed'),
                                    text: '图片展示'
						        },
						        {
						            name: 'material',
						            value: data.material,
						            url: ctx.helper.showImage(data.material, 160, 160, 'fixed'),
                                    text: '食材介绍'
						        },
						        {
						            name: 'cooking',
						            value: data.cooking,
						            url: ctx.helper.showImage(data.cooking, 160, 160, 'fixed'),
                                    text: '烹饪手法'
						        }]
						)}}


						{{ forms.editer('英文详细信息', 'detail', data.detail) }}
                        {{ forms.editer('移动端英文详细信息', 'detailMobile', data.detailMobile, 4) }}

                        {{ forms.submit() }}
                    </form>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{#js代码#}
{% block js %}
<script>
new Vue({
	el: '#dishes_taste',
	delimiters: ['${', '}'],
	data: {
	    name: '',
	    taste: {{ data.taste | default([]) | dump | safe}}
	},
	methods: {
		add: function() {//添加菜品
		    if ('' == this.name){
		        layer.msg('不能为空');
		        return;
		    }
            this.taste.push(this.name);
            this.name = '';
		},
        remove: function(index) {//删除菜品
            this.taste.splice(index,1);
        }
	}
});



    $(function () {
        var e = "";
        $("#form").validate({
            rules: {
                name: "required",
                jingle: "required"
            },
            messages: {
                name: {
                    required: e + "请输入商品名称（+规格名称）"
                },
                jingle: {
                    required: e + "请输入商品广告词"
                }
            },
            submitHandler: function() {
              asyncSubmitForm($("#form"));
            }
        });

    });
</script>

{% endblock %}